<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        li{list-style: none;}
    </style>
</head>
<body>
    <div id="app">
        <div>
            变更方法: 
            <button @click="sortList">点击排序</button>
            <button @click="addEleToList">点击新增</button>
        </div>
        <div>
            替换数组
            <button @click="concatEleToList">点击新增(concat)</button>
        </div>
       <div>
            无法检测数据数据变化:
            <button @click="EditEleToList">点击修改</button>
            <button @click="deleteEleToList">删除尾部元素(length--)</button>
       </div>
        <ul>
            <li v-for="item,index in list" :key="index">
                {{item}}
            </li>
        </ul>

     
    </div>
</body>
<script>
    // v-for 列表渲染

    // 变更方法
    // Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
    // push()
    // pop()
    // shift()
    // unshift()
    // splice()
    // sort()
    // reverse()
    // 影响原数组的方法: 

    // 替换数组 => 非变更方法(不影响原数组,返回新数组)
    // 变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法(返回新数组,不影响原数组)
    // filter()、concat() 和 slice() map()
    // 解决方法: 将新值对应属性名赋值给原属性  this.list = []

    // 无法检测数组更新操作
    // (1) 直接对应下标赋值
    // (2) 修改数组的length   arr.length --
  
   
 

    var vm = new Vue({
        el:"#app",
        data:{
            // 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。深入响应式原理中有相关的讨论。
            // 默认情况下,对list属性的数据绑定了数据监听,当list的值发生改变会重新更新视图
            list:[1,4,7,2,5,8,3,6,9],
        },
        methods: {
            sortList(){
                this.list.sort((a,b)=>a-b);
            },
            addEleToList(){
                var num = Math.round(Math.random()*100);  //随机数值
                var index = Math.floor(Math.random()*this.list.length); // 随机下标
                this.list.splice(index,0,num);
            },
            concatEleToList(){
                var num = Math.round(Math.random()*100); 
                this.list = this.list.concat(num); // concat返回是新数组
            },
            EditEleToList(){

                // 虽然数组中的数据发生了改变 但是this.list这个属性引用的地址没有发生改变 => 不会更新视图
                // this.list[0] = 100;
                // console.log(this.list);

                // 怎么解决?
                // (1) this.$forceUpdate(); 强制更新视图
                // this.list[0] = 100;
                // console.log(this.list);
                // this.$forceUpdate();

                // (2) this.$set(targetObj,key,val)  向嵌套对象/数组添加响应式 property
                this.$set(this.list,0,101)

            },
            deleteEleToList(){
                this.list.length&&this.list.length -- ;
                console.log(this.list);

                this.$forceUpdate(); 
            }

        },
    })






</script>
</html>